<template>
    <div class="login">
        <acount-login :loginForm="acountForm" :rules="acountRules" @acountLogin="acountLogin"></acount-login>
        <phone-login :phoneForm="phoneForm" :rules="phoneRules" @phoneLogin="phoneLogin" :ptime="30"></phone-login>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            /* 使用账号密码登录需要传递的表单数据 */
            acountForm: {
                username: '',
                password: ''
            },
            /* 使用账号密码登录需要传递的表单验证规则 */
            acountRules: {
                username: [
                    { required: true, message: '账号不能为空！', trigger: 'blur'},
                    { min: 2, max: 6, message: '账号长度必须在2-6个字符之间', trigger: 'blur'}
                ],
                password: [
                    { required: true, message: '密码不能为空！', trigger: 'blur'},
                    { min: 6, max: 12, message: '密码长度必须在6-12个字符之间', trigger: 'blur'}
                ]
            },
            phoneForm: {
                phone: '',
                code: ''
            },
            phoneRules: {
                phone: [
                    { required: true, message: '手机号不能为空', trigger: 'blur'},
                    { min: 11, max: 11, message: '手机号长度为11个字符', trigger: 'blur'}
                ],
                code: [
                    { required: true, message: '验证码不能为空', trigger: 'blur'},
                    { min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        acountLogin() {
            this.$message.success('登录成功！')
        },
        phoneLogin() {
            this.$message.success('登录成功！')
        }
    }
}
</script>

<style lang="scss" scoped>
.login {
    width: 500px;
    padding-left: 40px;
}
</style>